<template>
	<SecondTitle title="月度突发事件数量" />
	<Echarts v-if="list.length>0" container="accepted-project-ratio" :options="option()" :height="753" />
</template>
<script lang="ts" setup>
	import { resetSize } from '@/utils/reset'
	import { ref, onMounted } from 'vue'
	import * as echarts from 'echarts'
	import { getDeviceStatus } from '@/api/train'
  import { getTrafficEventStatistical4CurrentMonth } from '@/api/dataManage';
	import dayjs from 'dayjs'

	const list = ref([]);
	let option = () => {
		
	}
	const colorArr: any = ref([
		{
			color1: "rgba(15, 84, 153, 0.396)",
			color2: "rgba(115, 208, 255, 1)"
		},
		{
			color1: "rgba(77, 255, 181, 1)",
			color2: "rgba(11, 77, 44, 1)"
		},
		{
			color1: "rgba(229, 229, 229, 1)",
			color2: "rgba(117, 117, 117, 1)"
		},
		{
			color1: "rgba(255, 200, 89, 1)",
			color2: "rgba(153, 105, 38, 1)"
		}
	]);

	onMounted(async () => {
		
		let params = {
			pageSize: 10,
			pageNum: 1
		}
    await getTrafficEventStatistical4CurrentMonth().then((res: any) => {
      console.log("getTrafficEventStatistical4CurrentMonth is ", res.data.data);
      list.value = res.data.data;
      option = () => {
				let barItem = {};
				let serData: any = []
				let xAxisArr: any = []
        
        const mergedData = list.value.reduce((acc: any, cur: any) => {
          // 查找是否已存在相同月份的数据
          const existing = acc.find((item: any) => item.month === cur.month);
          if (!existing) {
            // 不存在则添加新条目（浅拷贝避免引用问题）
            acc.push({ ...cur });
          }
          return acc;
        }, []);

        mergedData.map((xItem: any) => {
          xAxisArr.push(xItem.month);
          let monthData: any = [];
          list.value.forEach((deviceItem: any, index: any) => {
            if (xItem.month === deviceItem.month) {
              monthData.push(deviceItem.count);
            }
          });
          serData.push({
            name: xItem.level,
            type: 'bar',
            data: monthData
          });
        });
        
        console.log("serData is ", serData);

				let opt = {
					tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: xAxisArr
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: serData
        };
				return opt
			}
		});
	})
</script>

<style lang="scss" scoped></style>
